<template>
  <div class="h-100">
      <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>

      <div class="p-50 p-t-20 h-100 o-y-auto">


 <div class="f j-e">
    <el-button type="primary" @click="openDiang({},'add','2')">新增二级分类</el-button>
    </div>



    <el-table
    :data="tableData"
    row-key="id"
    lazy
    v-loading="loading"
    :load="load"
    class="m-t-20"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    type="index"
    style="width: 100%">
    <el-table-column
      label="二级栏目">
      <template slot-scope="scope">
        <el-button size="small" @click="openDiang(scope.row,'edit',scope.row.lableLevel)">{{ scope.row.lableName }}<i class="el-icon-edit m-l-10"></i></el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="序号">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.ordNmber }}</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        
          <el-button
          v-if="!scope.row.hasChildren"
          size="mini"
          type="primary"
          plain
          @click="toeditCont(scope.row.id)">文章 ({{scope.row.count}})</el-button>
          <el-button
          v-show="scope.row.level === 2"
          v-if="!scope.row.count"
          size="mini"
          type="primary"
          plain
          @click="openDiang(scope.row,'add',parseInt(scope.row.lableLevel)+1)">新增下级菜单</el-button>
          <el-button
          size="mini"
          type="primary"
          plain
          @click="delectTwoColumn(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


     
  </div>


  <!-- 新增/编辑 -->
  <el-dialog :title="dData.dTitle" :visible.sync="dData.dShow" width="30%" center>
    <el-input v-model="dData.dValue1" placeholder="请输入标题"></el-input>
    <el-input class="m-t-5" v-model="dData.dValue2" placeholder="请输入序号"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addEditColumn">确 定</el-button>
      <el-button @click="dData.dShow = false">取 消</el-button>
    </span>
  </el-dialog>



  </div>
</template>
<script>
import {
  addTwoColumn,
  queryTwoColumn,
  delectTwoColumn,
  editTwoColumn
} from "../http/api";
export default {
  name: "editList3",
  data() {
    return {
      // 新增/编辑菜单
      dData: {
        dShow: false,
        dTitle: "提示",
        dValue1: "",
        dValue2: "",
        level: "2",
        type: "add",
        id: ""
      },
      loading: true,
      tableData: [],
      activeNames: ["1"]
    };
  },

  created() {
    this.queryTwoColumn(this.$store.state.navId);
  },
  mounted() {},
  methods: {
    // 查询栏目
    queryTwoColumn(id) {
      const data = {
        pId: id
      };
      queryTwoColumn(data).then(res => {
        console.log(res);
        this.tableData = [];
        if (res.data.length > 0) {
          res.data.forEach((item, index) => {
            item.children = [];
            item.level = 2;
            if (item.pId == this.$store.state.navId) {
              queryTwoColumn({ pId: item.id }).then(ress => {
                if (ress.data.length > 0) {
                  item.hasChildren = true;
                  ress.data.forEach(items => {
                    item.children.push(items);
                    items.level = 3;
                  });
                } else {
                  item.hasChildren = false;
                }
              });
              this.tableData.push(item);
            }
          });
          console.log({ 查询订单: this.tableData });
        }
        this.loading = false;
      });
    },

    // 打开弹窗
    openDiang(item, type, level) {
      if (type == "add") {
        this.dData.dTitle = "新增栏目";
        this.dData.dValue1 = "";
        this.dData.dValue2 = "0";
      }
      if (type == "edit") {
        this.dData.dTitle = "修改栏目";
        this.dData.dValue1 = item.lableName;
        this.dData.dValue2 = item.ordNmber;
      }
      this.dData.level = level;
      this.dData.type = type;
      this.dData.id = item.id;
      this.dData.dShow = true;
    },

    // 添加编辑栏目
    addEditColumn() {
      if (this.dData.dValue1 == "") {
        this.$message("请输入标题名称");
        return false;
      }
      if (this.dData.dValue2 == "") {
        this.$message("请输入排序号");
        return false;
      }
      const data = {
        pId: parseInt(this.$store.state.navId),
        lableName: this.dData.dValue1,
        level: this.dData.level,
        ordNmber: this.dData.dValue2
      };
      if (this.dData.level != "2") {
        data.pId = this.dData.id;
      }
      if (this.dData.type == "add") {
        addTwoColumn(data).then(res => {
          console.log({ 添加栏目: res });
          this.dData.dShow = false;
          this.queryTwoColumn(parseInt(this.$store.state.navId));
        });
      }
      if (this.dData.type == "edit") {
        const data = {
          id: this.dData.id,
          lableName: this.dData.dValue1,
          ordNmber: this.dData.dValue2
        };
        editTwoColumn(data).then(res => {
          console.log({ 修改栏目: res });
          this.dData.dShow = false;
          this.queryTwoColumn(parseInt(this.$store.state.navId));
        });
      }
    },
    // 删除栏目
    delectTwoColumn(item) {
      const data = {
        id: item.id
      };
      delectTwoColumn(data).then(res => {
        console.log({ 删除栏目: res });
        this.queryTwoColumn(parseInt(this.$store.state.navId));
      });
    },

    // 编辑详情
    toeditCont(id, count) {
      this.$store.commit("columnId", id);
      this.$router.push({
        path: "../page/editList2_1"
      });
    },

    // 表格懒加载
    load(tree, treeNode, resolve) {
      const data = {
        pId: tree.id
      };
      queryTwoColumn(data).then(res => {
        console.log({ 查询子集栏目: res });
        resolve(res.data);
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

